<%--
  Created by IntelliJ IDEA.
  User: 86187
  Date: 2021/10/21
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <link href="/resource/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script>

</head>
<body>

<div class="text-center">
    <h3>添加商品</h3>

    <form:form action="/add" method="post" modelAttribute="goods">
        名称:<form:input path="name"/>
        <!--错误提示-->
        <form:errors path="name" cssClass="text-danger"></form:errors>
        <br>
        描述:<form:input path="ms"></form:input>
        <form:errors path="ms" cssClass="text-danger"></form:errors>
        <br>
        价格:<form:input path="price"></form:input>
        <form:errors path="price" cssClass="text-danger"></form:errors>
        <br>
        状态:
        上架:<form:radiobutton path="status" value="0"></form:radiobutton>
        下架 <form:radiobutton path="status" value="1"></form:radiobutton>
        <form:errors path="status" cssClass="text-danger"></form:errors>
        <br>
        品牌：<form:select path="bid">
        <form:option value="">请选择</form:option>
      <%--  <form:options items="${listBrands}" itemLabel="bname" itemValue="bid"></form:options>--%>
    </form:select>

        <form:errors path="bid" cssClass="text-danger"></form:errors><br>

        商品分类：
        <select name="type1" id="type1" onchange="getType2(this)">
            <option value="">请选择</option>
        </select>
        <select name="type2" id="type2" onchange="getType3(this)">
            <option value="">请选择</option>
        </select>
        <select name="type3" id="type3">
            <option value="">请选择</option>
        </select>

        <br>
        图片: <input type="file" name="file" onchange="upFile(this)">
        <form:errors path="picurl" cssClass="text-danger"></form:errors>
        <div id="pic">
            <c:forTokens items="${goods.picurl}" delims="," var="picurl">
                <img src="${picurl}" width="60px" height="80px">
                <input type="hidden" name="picurl" value="${picurl}">
            </c:forTokens>
        </div>
        <br>

        <br>
        <button type="submit">增加</button>
    </form:form>
    <script>
        //三级联动
        $(function () {
            //获取一级分类
            $.get("/listTypeByPid", {pid: 0}, function (list) {
                for (var i in list) {
                    $("#type1").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
                }

            })
        })

        //获取二级分类
        function getType2(obj) {
            var pid = $(obj).val();//获取一级分类的id
            $("#type2").html("<option value='' >请选择</option>")
            $.get("/listTypeByPid", {pid: pid}, function (list) {

                for (var i in list) {
                    $("#type2").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
                }

            })

        }

        //获取三级级分类
        function getType3(obj) {
            var pid = $(obj).val();//获取一级分类的id
            $("#type3").html("<option value='' >请选择</option>")
            $.get("/listTypeByPid", {pid: pid}, function (list) {

                for (var i in list) {
                    $("#type3").append("<option value='" + list[i].id + "'>" + list[i].name + "</option>")
                }

            })

        }


        //文件上传
        function upFile(obj) {
            var formData = new FormData();
            formData.append("file", obj.files[0]);
            $.ajax({
                type: "post",
                url: "/upFile",
                data: formData,
                processData: false,
                contentType: false,//js 不处理上传的文件类型
                success: function (url) {
                    if (url) {
                        //  $("#pic").empty();//先清空上一次上传的图片,放开是单个文件上传，注释就是多个文件了
                        //获取文件上传的地址,并显示图片
                        $("#pic").append("<img src='" + url + "' width='80px' height='60px'>")
                        //为隐藏域赋值，把图片地址存入数据库
                        $("#pic").append("<input type='hidden' name='picurl' value='" + url + "'>")
                    }
                }


            })


        }
        //动态的获取所有品牌
        $(function (){
            $.get("/listBrand",function (list){
             for(var i in list){
                 $("#bid").append("<option value='"+list[i].bid+"'>"+list[i].bname+"</option>")

             }
             //让下拉框默认选中提交选中的值
               var bid= '${goods.bid}';
                $("#bid").val(bid);//选中
            })
        })
    </script>
</div>
</body>
</html>
